<template>
  <div>
    <el-row
      :gutter="20"
      style="margin-bottom: 16px;"
    >
      <el-col :span="6">
        <el-card>
          <div>待支付</div>
          <div style="font-size: 22px; font-weight: bold;">
            {{ stats.pending }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>已完成</div>
          <div style="font-size: 22px; font-weight: bold;">
            {{ stats.finished }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div>已取消</div>
          <div style="font-size: 22px; font-weight: bold;">
            {{ stats.cancelled }}
          </div>
        </el-card>
      </el-col>
      <el-col
        :span="6"
        style="display: flex; align-items: center;"
      >
        <el-button
          type="primary"
          @click="exportOrders"
        >
          导出订单
        </el-button>
      </el-col>
    </el-row>
    <el-select
      v-model="statusFilter"
      placeholder="筛选订单状态"
      style="width: 180px; margin-bottom: 16px;"
    >
      <el-option
        label="全部"
        value=""
      />
      <el-option
        label="待支付"
        value="待支付"
      />
      <el-option
        label="已完成"
        value="已完成"
      />
      <el-option
        label="已取消"
        value="已取消"
      />
    </el-select>
    <el-table
      :data="pagedOrders"
      style="width: 100%"
      row-key="orderId"
      :expand-row-keys="expandRowKeys"
      @expand-change="onExpandChange"
    >
      <el-table-column type="expand">
        <template #default="scope">
          <el-descriptions
            title="商品详情"
            :column="1"
            border
          >
            <el-descriptions-item label="商品">
              {{ scope.row.product }}
            </el-descriptions-item>
            <el-descriptions-item label="买家">
              {{ scope.row.buyer }}
            </el-descriptions-item>
            <el-descriptions-item label="收货地址">
              {{ scope.row.address }}
            </el-descriptions-item>
            <el-descriptions-item label="下单时间">
              {{ scope.row.time }}
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderId"
        label="订单号"
      />
      <el-table-column
        prop="product"
        label="商品"
      />
      <el-table-column
        prop="buyer"
        label="买家"
      />
      <el-table-column
        prop="status"
        label="状态"
      >
        <template #default="scope">
          <el-tag :type="scope.row.status === '已完成' ? 'success' : (scope.row.status === '待支付' ? 'warning' : 'info')">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            @click="showDetail(scope.row)"
          >
            详情
          </el-button>
          <el-button
            v-if="scope.row.status === '待支付'"
            size="small"
            @click="finishOrder(scope.row)"
          >
            完成
          </el-button>
          <el-button
            v-if="scope.row.status === '待支付'"
            size="small"
            type="danger"
            @click="cancelOrder(scope.row)"
          >
            取消
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      style="margin-top: 16px; text-align: right;"
      background
      layout="prev, pager, next"
      :total="filteredOrders.length"
      :page-size="pageSize"
    />
    <el-dialog
      v-model="dialogVisible"
      title="订单详情"
    >
      <el-table
        :data="currentOrder ? [currentOrder] : []"
        border
        style="width:100%"
      >
        <el-table-column
          prop="orderId"
          label="订单号"
        />
        <el-table-column
          prop="product"
          label="商品"
        />
        <el-table-column
          prop="buyer"
          label="买家"
        />
        <el-table-column
          prop="status"
          label="状态"
        />
        <el-table-column
          prop="time"
          label="下单时间"
        />
        <el-table-column
          prop="address"
          label="收货地址"
        />
      </el-table>
      <template #footer>
        <el-button @click="dialogVisible = false">
          关闭
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
const pageSize = 5
const currentPage = ref(1)
const dialogVisible = ref(false)
const currentOrder = ref<any>(null)
const statusFilter = ref('')
const expandRowKeys = ref<string[]>([])
const orders = ref([
  { orderId: '1001', product: '二手书', buyer: '张三', status: '待支付', time: '2025-06-01 10:00', address: '宿舍1楼101' },
  { orderId: '1002', product: '二手自行车', buyer: '李四', status: '已完成', time: '2025-06-02 11:00', address: '宿舍2楼202' },
  { orderId: '1003', product: '二手台灯', buyer: '王五', status: '已取消', time: '2025-06-03 12:00', address: '宿舍3楼303' },
  { orderId: '1004', product: '二手耳机', buyer: '赵六', status: '待支付', time: '2025-06-04 13:00', address: '宿舍4楼404' }
])
const filteredOrders = computed(() =>
  statusFilter.value ? orders.value.filter(o => o.status === statusFilter.value) : orders.value
)
const pagedOrders = computed(() =>
  filteredOrders.value.slice((currentPage.value - 1) * pageSize, currentPage.value * pageSize)
)
const stats = computed(() => {
  return {
    pending: orders.value.filter(o => o.status === '待支付').length,
    finished: orders.value.filter(o => o.status === '已完成').length,
    cancelled: orders.value.filter(o => o.status === '已取消').length
  }
})
function showDetail(row: any) {
  currentOrder.value = row
  dialogVisible.value = true
}
function finishOrder(row: any) {
  row.status = '已完成'
  ElMessage.success('订单已完成')
}
function cancelOrder(row: any) {
  row.status = '已取消'
  ElMessage.success('订单已取消')
}
function exportOrders() {
  ElMessage.success('导出成功（模拟）')
}
function onExpandChange(row: any) {
  const key = row.orderId
  if (expandRowKeys.value.includes(key)) {
    expandRowKeys.value = []
  } else {
    expandRowKeys.value = [key]
  }
}
</script> 